<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>随心——留言板</title>
    <link rel="stylesheet" href="/stylesheets/css/index.css">
  </head>
  <body>
    <div class="container">
      <%- include('he_nav') -%>

      <div class="main box">
        <h1>留言列表</h1>
        <div class="postedmessage">
          <% shortmeslist.forEach(doc=>{ %>
          <% doc.content = doc.content.replace(/\r\n/g, '</p><p>').replace(/\n/g, '</p><p>').replace(/\s/g, '&nbsp'); %>
          <div>
            <div><p><%- doc.content %></p></div>
            <p><%= doc.loginname %></p>
          </div>
          <p><%=doc.S_Time%></p>
          <a href="#" onclick="deleteMes()">删除</a>
          <%})%>
        </div>
        <div class="pagearr">
          <a href="/shortmes/?page=<%= prevPage %>">上一页</a>
          <a href="/shortmes/?page=<%= nextPage %>">下一页</a>
        </div>

        <form action="/users/shortmes" method="post">
          <textarea name="content" maxlength="100" placeholder="分享新鲜事儿（100字以内）"></textarea>
          <div style="color:red" data-error="content"></div>
          <%= firstnum %> + <%= secondnum %> = <input type="text" class="verif" name="vnum" >
          <button type="submit" name="button">留言</button>
          <div style="color:red" data-error="vnum"></div>
        </form>
      </div>

      <%- include('sid_footer') -%>
    </div>
    <script type="text/javascript" src="../../../javascripts/open.js"></script>
    <script type="text/javascript" src="../../../javascripts/validateShortmes.js"></script>
    <script type="text/javascript">
      const form = document.querySelector("form");
      const doms = form.querySelectorAll("div");
      const contenterror = doms[0];
      const vnumerror = doms[1];
      const firstnum = <%= firstnum %>;
      const secondnum = <%= secondnum %>;

      async function deleteMes(event){
        const a = window.event.target;
        const mesLogName = a.previousElementSibling.previousElementSibling.lastElementChild.innerText;
        const mesLogTime = a.previousElementSibling.innerText;
        console.log(mesLogName);
        console.log(mesLogTime);
        await fetch("/users/shortmes/delete",{
          method:"POST",
          body: JSON.stringify({mesLogName,mesLogTime}),
          credentials:"include",
          headers:{
            "Content-Type":"application/json"
          }
        }).then(res=>res.text())
          .then(errors=>alert(errors))
          .catch(e => console.log("error", e));
        location.href="/shortmes";
      }

      form.onsubmit = async function (event) {
        event.preventDefault();
        const content = form.querySelector("textarea").value;
        const vnum = form.querySelector("input").value;
        const errors = valiMes(content,vnum,firstnum,secondnum);
        if(errors){
          showInfo(JSON.stringify(errors));
        }else{
          await fetch("/users/shortmes",{
            method:"POST",
            body: JSON.stringify({content,vnum}),
            credentials:"include",
            headers:{
              "Content-Type":"application/json"
            }
          }).then(res=>res.text())
            .then(errors=>alert(errors))
            .catch(e => console.log("error", e));
          location.href="/shortmes";
        }
      }
    </script>
  </body>
</html>
